<template>
	<view class="messages">
			<!-- 胶囊子组件 -->
			<navNav :navobj="navobj"></navNav>
			<view class="message">
				<view class="message-left">
					<image src="../../static/logo.png" mode="aspectFill"></image>
					<view class="message-left-right">
						<view class="title">系统通知</view>
						<view class="des">店铺新访客</view>
					</view>
				</view>
				<view class="message-right">
						<view class="title-right">1分钟前</view>
						<view class="many">1</view>
				
				</view>
			</view>
			<view class="message">
				<view class="message-left">
					<image src="../../static/logo.png" mode="aspectFill"></image>
					<view class="message-left-right">
						<view class="title">订单消息</view>
						<view class="des">暂无消息</view>
					</view>
				</view>
				<view class="message-right"></view>
			</view>
			<view class="message">
				<view class="message-left">
					<image src="../../static/logo.png" mode="aspectFill"></image>
					<view class="message-left-right">
						<view class="title">异常通知</view>
						<view class="des">店铺新访客</view>
					</view>
				</view>
				<view class="message-right"></view>
			</view>
			<view class="kf">
				<image src="../../static/logo.png" mode=""></image>
				<view>客服中心</view>
			</view>
		
		
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
		title:'消息',
		image:false
	})
</script>

<style lang="scss">
.message{
	width: 670rpx;display: flex;align-items: center;height: 140rpx;justify-content: space-between;
	margin: 0 auto;
	.message-left{
		display: flex;align-items: center;
		image{
			width: 100rpx;height: 100rpx;
		}
		.message-left-right{
			height: 100rpx; display: flex;flex-direction: column;justify-content: space-around;margin-left: 20rpx;
			.title{
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 700;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.des{
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0,0,0,0.3);
			}
		}
	}
	.message-right{
			height: 100rpx; display: flex;flex-direction: column;justify-content: space-around;
			align-items: flex-end;
			.title-right{
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0,0,0,0.302);
			}
			.many{
				text-align: center;
				line-height: 34rpx;
				width: 34rpx;
				height: 34rpx;
				background: #FA5151;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
	}
}
.kf{
	margin: 0 auto;margin-top: 40rpx;
	display: flex;align-items: center;justify-content: center;
	width: 210rpx;
	height: 50rpx;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 1rpx solid rgba(0,0,0,0.16);
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 400;
	font-size: 20rpx;
	color: rgba(0,0,0,0.85);
	image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
}

</style>
